#wrap {
  min-width: unset;
  .inner {
    width: unset;
  }
  .page-job-wrapper {
    padding-top: 0 !important;
    width: 100%;
    position: relative;

    .page-job-inner,
    .job-search-wrapper {
      width: 65%;
      max-width: 870px;
      min-width: 320px;
      margin: 20px auto 20px 30%;
      &.fix-top {
        position: unset;
        margin-top: unset;
        box-shadow: unset;
      }
    }
  }
  .page-job-content,
  .job-list-wrapper,
  .job-card-wrapper {
    width: 100% !important;
  }
  .page-job-inner .page-job-content {
    display: flex;
    flex-direction: column;
    order: 2;
  }
  .job-card-wrapper {
    border: 3px solid transparent;
    .job-card-footer,
    .job-card-right,
    .job-card-body {
      display: flex;
    }
    .job-card-body {
      border-radius: 12px 12px 0 0;
    }

    .job-card-left .job-title,
    .salary,
    .job-card-right .company-name {
      font-size: clamp(0.625rem, 0.407rem + 1.09vw, 1rem) !important;
    }
    .tag-list li,
    .company-tag-list li,
    .info-desc {
      font-size: clamp(0.531rem, 0.368rem + 0.82vw, 0.813rem) !important;
    }
    .job-card-left {
      height: unset;
      padding: 16px 24px 12px;
      .job-name {
        margin-right: 12px;
      }
      .job-area-wrapper {
        margin-left: 0 !important;
      }
      .start-chat-btn,
      .info-public {
        display: inline-block;
      }
      .job-info {
        height: unset;
        overflow: unset;
        > * {
          margin: 3px;
        }
      }
    }
    .job-card-right {
      flex-wrap: wrap;
      .company-logo {
        margin-right: 12px;
        width: unset;
        height: unset;
        border: unset;
        border-radius: 15px;
        img {
          object-fit: contain;
          width: clamp(4.063rem, 3.699rem + 1.82vw, 4.688rem);
        }
      }
      .company-info {
        margin-left: 0;
      }
    }
    .job-card-footer {
      padding: 8px 12px 14px 12px;
    }

    .job-card-left .tag-list,
    .company-tag-list {
      height: unset;
      border: unset;
    }
  }

  .search-job-result .job-list-box {
    display: flex;
    flex-direction: column;

    .job-card-wrapper {
      margin: 16px auto;
    }
  }
  .job-search-box .job-search-form {
    width: 100% !important;
    display: flex;
    .city-label,
    .search-input-box {
      width: unset;
    }
    .search-input-box {
      flex: 1;
    }
    .search-btn {
      margin: 0 15px;
    }
  }
}

html {
  --body-bg-color: #f6f6f8;
  body {
    background-color: var(--body-bg-color);
  }
  .page-job:before {
    background: unset;
  }
}

.el-input .el-input__inner {
  background-color: unset !important;
  border: unset !important;
}
html.dark {
  --el-bg-color: #212020;
  --body-bg-color: #212121;

  #header .inner:before,
  .page-job:before {
    background: unset;
  }
  .job-search-wrapper,
  .job-card-wrapper,
  .satisfaction-feedback-wrapper,
  .job-search-box .city-label,
  .job-search-box .search-input-box,
  .job-search-box .search-input-box input,
  .hot-link-wrapper,
  .filter-select-dropdown li {
    background-color: #292929 !important;
  }
  .filter-select-dropdown {
    &,
    ul,
    .condition-position-detail {
      background-color: #292929 !important;
      border: 1px solid #5a5a5a !important;
    }
    * {
      color: #cfd3dc !important;
    }
    .active {
      color: #00a6a7 !important;
    }
  }
  .job-title,
  .info-desc,
  .tag-list li,
  .company-name a,
  .satisfaction-feedback-wrapper h3,
  .fast-next-btn,
  .search-map-btn,
  .city-label,
  .city-area-select .area-dropdown-item li,
  .city-area-select .city-area-tab li,
  .subway-select-wrapper .subway-line-list li,
  .condition-filter-select .current-select,
  .el-vl__wrapper,
  .el-checkbox__label,
  .placeholder-text,
  #boos-helper-job h2 {
    color: #cfd3dc !important;
  }
  .city-area-select .area-select-wrapper,
  .condition-filter-select,
  .condition-position-select.is-select .current-select,
  .job-card-body,
  .condition-industry-select {
    background-color: #434141;
  }
  .job-card-wrapper {
    transition: all 0.3s ease;
    position: relative;
    .job-card-footer {
      background: linear-gradient(90deg, #373737, #4d4b4b);
    }
    .job-card-left .start-chat-btn {
      background: rgb(0 190 189 / 70%);
    }
    .job-info .tag-list li,
    .info-public,
    .company-tag-list li {
      color: #cfd3dc !important;
      background: #44e1e326 !important;
      border: 0.5px solid #e5e6e678 !important;
    }
    .info-public em:before {
      height: 70%;
    }
  }
  .job-loading-wrapper .job-loading-list li {
    filter: invert(83%);
  }
}
